<template>
  <div class="about">
    <el-row>
      <el-col :span="17">
        <div>
          <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane label="我的话题" name="question">
              <div v-for="(item,index) in questionList" :key="index" class="question">
                <div style="font-size: large;margin-top: 10px;"><el-button style="font-size: large;" type="text" @click="goToQuestion(item.m_id,item.moduleName)">{{ item.moduleName }}</el-button></div>
                <div style="font-size: large;color: #005097;margin-top: 10px;"><el-button style="font-size: large;" type="text" @click="goToReply(item.id)">{{ item.title }}</el-button></div>
                <div style="color: #666666;margin-top: 10px;margin-bottom: 10px;">{{ item.content }}</div>
                <div v-if="item.img.length > 0">
                  <img v-for="(img,index) in item.imgList" :key="index" style="height: 100px;width: 150px;" :src="imgUrl+img" />
                </div>
                <div v-else-if="item.video.length > 0">
                  <video :src="imgUrl+item.video" type="video/mp4" controls="controls" style="height: 300px;width: auto;"></video>
                </div>
                <div style="color: #666666;margin-top: 10px;font-size: small;"><i class="el-icon-user"></i> {{ item.userName }} <i class="el-icon-alarm-clock"></i> {{ item.formatTime }}</div>
              </div>
              <div style="clear: both;text-align: right;">
                <el-pagination background layout="prev, pager, next" :total="questionTotal" @current-change="currentChangeQuestion"></el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="我的评论" name="reply">
              <div>
                <el-collapse>
                  <div v-for="(item,index) in replyList" :key="index" class="question">
                    <el-divider></el-divider>
                    <el-row>
                      <el-col :span="24" style="padding: 20px;">
                        <el-row>
                            <el-col :span="20">
                              <div style="color: #666666;margin-top: 10px;margin-bottom: 10px;word-wrap: break-word;">{{ item.content }}</div>
                              <div v-if="item.img.length > 0">
                                  <img v-for="(img,index) in item.imgList" :key="index" style="height: 100px;width: 150px;" :src="imgUrl+img" />
                              </div>
                              <div v-else-if="item.video.length > 0">
                                  <video :src="imgUrl+item.video" type="video/mp4" controls="controls" style="height: 300px;width: auto;"></video>
                              </div>
                              <el-row>
                                <el-col :span="18">
                                  <div style="color: #666666;margin-top: 10px;font-size: small;"> <i class="el-icon-alarm-clock"></i> {{ item.formatTime }}</div>
                                </el-col>
                                <el-col :span="4" style="text-align: right;">
                                  <el-button type="text">{{ item.adopt === 1? '已被采纳':'未被采纳' }}</el-button>
                                </el-col>
                              </el-row>
                                <el-collapse-item :name="item.id+''">
                                  <template slot="title">
                                      <el-button type="text">查看更多回复（{{item.dataList.length}}）</el-button>
                                  </template>
                                    <div v-for="(item1,index1) in item.dataList" :key="index1">
                                        <el-row>
                                            <el-col :span="24" style="padding: 20px;">
                                                <el-row>
                                                    <el-col :span="20">
                                                        <div style="color: #666666;margin-top: 10px;margin-bottom: 10px;word-wrap: break-word;line-height: 20px;">
                                                            <el-row>
                                                                <el-col :span="4"><img :src="imgUrl+item1.userImg" style="height: 40px;width: 40px;margin: 10px;" /></el-col>
                                                                <el-col :span="20" style="line-height: 60px;">
                                                                    <el-button type="text">{{ item1.userName }}</el-button>回复
                                                                    <el-button type="text">{{ item1.rUserName }}</el-button>： {{ item1.content }}
                                                                </el-col>
                                                            </el-row>
                                                        </div>
                                                        <div v-if="item1.img.length > 0">
                                                            <img v-for="(img,index) in item1.imgList" :key="index" style="height: 100px;width: 150px;" :src="imgUrl+img" />
                                                        </div>
                                                        <div v-else-if="item1.video.length > 0">
                                                            <video :src="imgUrl+item1.video" type="video/mp4" controls="controls" style="height: 300px;width: auto;"></video>
                                                        </div>
                                                        <el-row>
                                                          <el-col :span="18">
                                                              <div style="color: #666666;margin-top: 10px;font-size: small;"> <i class="el-icon-alarm-clock"></i> {{ item1.formatTime }}</div>
                                                          </el-col>
                                                        </el-row>
                                                    </el-col>
                                                </el-row>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-collapse-item>
                            </el-col>
                        </el-row>
                      </el-col>
                    </el-row>
                  </div>
                </el-collapse>
              </div>
              <div style="clear: both;text-align: right;">
                <el-pagination background layout="prev, pager, next" :total="replyTotal" @current-change="currentChangeReply"></el-pagination>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span="6" :offset="1" style="text-align: left;">
        <div v-if="userType !== null" style="margin: 20px;">
          <div><img :src="imgUrl+userImg" style="height: 100px;width: 100px;margin-top: 10px;" /></div>
          <div style="margin-top: 10px;color: #7f7f81;">姓名：{{ userName }}</div>
          <div style="margin-top: 10px;color: #7f7f81;">角色：{{ userType === 'admin'?'管理员':userType === 'auditors'?'审核员':'用户' }}</div>
          <div style="margin-top: 10px;color: #7f7f81;">账号：{{ userPhone }}</div>
          <div style="margin-top: 10px;color: #7f7f81;">性别：{{ userGender }}</div>
          <div style="margin-top: 10px;color: #7f7f81;">出生日期：{{ userBirthday }}</div>
          <div style="margin-top: 10px;"><el-button style="width: 100%;" @click="exitSystem">退出登录</el-button></div>
        </div>
        <div v-else>暂无信息，请先登录</div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { listQuestion, listQuestionReply } from '@/api/api'
import { timestampToTime } from '@/util/dateUtil'
export default {
  data(){
    return{
      imgUrl:'',
      userId: 0,
      userImg: '',
      userGender: '',
      userName: '',
      userPhone: '',
      userBirthday: '',
      userType: '',
      activeName: 'question',
      questionCurrent: 1,
      questionSize: 10,
      questionTotal: 0,
      questionList: [],
      replyCurrent: 1,
      replySize: 10,
      replyTotal: 0,
      replyList: []
    }
  },
  mounted(){
    const that = this
    that.imgUrl = that.$store.state.imgUrl,
    that.getUserMessage()
    if(that.userType != null && that.userType.length > 0){
      that.getQuestionList()
    }
  },
  methods:{
    getUserMessage:function(){
      const that = this
      that.userId = localStorage.getItem('userId')
      that.userImg = localStorage.getItem('userImg')
      that.userGender = localStorage.getItem('userGender')
      that.userName = localStorage.getItem('userName')
      that.userPhone = localStorage.getItem('userPhone')
      that.userBirthday = localStorage.getItem('userBirthday')
      that.userType = localStorage.getItem('userType')
    },
    exitSystem:function(){
      const that = this
      localStorage.clear()
      that.$message({
        message: '登出成功',
        type:'success'
      })
      that.getUserMessage()
    },
    getQuestionList:function(){
      const that = this
      listQuestion({
        current: that.questionCurrent,
        size: that.questionSize,
        userId: that.userId
      }).then(res => {
        that.questionTotal = res.data.total
        let questionList = res.data.records
        questionList.forEach(item => {
          item.imgList = item.img.split(',')
          item.formatTime = timestampToTime(item.time)
        })
        that.questionList = questionList
      })
    },
    getReplyList:function(){
      const that = this
      listQuestionReply({
        current: that.replyCurrent,
        size: that.replySize,
        userId: that.userId
      }).then(res => {
        that.replyTotal = res.data.total
        let replyList = res.data.records
        replyList.forEach(element => {
          element.imgList = element.img.split(',')
          element.formatTime = timestampToTime(element.time)
          if(element.dataList !== undefined){
            let dataList = element.dataList
            dataList.forEach(item => {
                item.imgList = item.img.split(',')
                item.formatTime = timestampToTime(item.time)
            })
            element.dataList = dataList
          }else{
              element.dataList = []
          }
        })
        that.replyList = replyList
      })
    },
    currentChangeQuestion:function(current){
      const that = this
      that.questionCurrent = current
      that.getQuestionList()
    },
    currentChangeReply:function(current){
      const that = this
      that.replyCurrent = current
      that.getReplyList()
    },
    handleTabClick:function(tab,event){
      const that = this
      if('reply' === tab.name){
        that.replyCurrent = 1
        that.getReplyList()
      }else{
        that.questionCurrent = 1
        that.getQuestionList()
      }
    },
    goToReply:function(id){
      const that = this
      that.$router.push('/reply?q_id='+id)
    },
    goToQuestion:function(id,name){
      const that = this
      that.$router.push('/question?m_id='+id+'&m_name='+name)
    }
  }
  
}
</script>
<style scoped>

</style>
